{% extends 'basic/layout/page_basic_bread_query.html' %}
{% load static %}

<!-- 标题部分 -->
{% block title %}
    专业管理
{% endblock %}

<!-- CSS部分 -->
{% block excss %}
    <style>
        .layui-form-select dl {
            max-height: 170px;
        }
    </style>
{% endblock %}

<!-- 面包屑导航 -->
{% block breadsecond %} 基础数据 {% endblock %}
{% block breadthird %} 专业管理 {% endblock %}

<!-- 内容部分 -->
{% block excontent %}
    <!-- 内容03: 表格部分 -->
    <table class="layui-hide" id="tableArea" lay-filter="tableArea"></table>

    <!-- 内容04：表格右侧的操作按钮 -->
    <script type="text/html" id="tableButton">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="fa fa-edit" aria-label="true"></i>&nbsp;编辑
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="fa fa-trash" aria-label="true"></i>&nbsp;删除
        </a>
    </script>

    <!-- 内容05：添加和修改的弹出层 -->
    <div id="layerArea" style="display: none; padding: 30px;">
        <form id="layerForm" class="layui-form" lay-filter="layerForm">
            {% csrf_token %}

            <div class="layui-form-item">
                <label class="layui-form-label" for="faculty"><b>院系名称：</b></label>
                <div class="layui-input-block">
                    <select id="faculty" name="faculty" lay-search="">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
              <div class="layui-form-item" style="display: none;">
                <label class="layui-form-label" for="major_id"><b>专业编号：</b></label>
                <div class="layui-input-block">
                    <input type="text" id="major_id" name="major_id" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="major"><b>专业名称：</b></label>
                <div class="layui-input-block">
                    <input type="text" id="major" name="major" class="layui-input">
                </div>
            </div>
        </form>
    </div>
{% endblock %}

<!-- JS部分 -->
{% block js %}
    <script>
        //===== 定义一个全局变量  ============
        let Operation = 0;  // 1 -- 添加   2 -- 修改
        $(function () {
            // 初始化表格
            initTable();
            // 按钮点击
            buttonClick();
        });

        // ================ 初始化表格 ================
        function initTable() {

            layui.use(['table', 'form'], function () {
                // 实例化对象
                let table = layui.table;

                // 渲染表格
                table.render({
                    elem: $('#tableArea')
                    , url: "{% url 'list_major' %}"
                    , method: 'post'
                    , where: {
                        // 携带输入的查询条件！
                        inputStr: $('#inputStr').val().trim(),
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                    }
                    , even: true
                    , cols: [[
                        {type: 'numbers', width: 60, title: '编号', align: 'center', sort: true}
                        , {field: 'faculty__name', width: 280, title: '院系名称', align: 'center',}
                        , {field: 'name', title: '专业名称', align: 'center', sort: true}
                        , {fixed: 'right', title: '操作', width: '20%', align: 'center', toolbar: '#tableButton'}
                    ]]
                    , page: true  // 启用分页，默认就向后台发送两个参数：page=1,limit=10
                    , limit: 12
                    , limits: [12, 15, 20, 30, 50, 75, 100]
                    , done: function (res, current, count) {
                        $('thead tr').css({'background-color': '#009688', 'color': 'white'})
                    }

                });

                // 侦听表格的按钮
                table.on('tool(tableArea)', function (obj) {
                    // 取出当前行数据
                    let oneLineData = obj.data;
                    // 响应按钮的点击事件
                    if (obj.event === 'edit') {
                        // 修改Operation
                        Operation = 2;


                        // 点击编辑按钮的代码
                        loadLayer("修改专业信息", oneLineData);

                    } else if (obj.event === 'del') {
                        // 点击删除按钮的代码
                        deleteValue(oneLineData);
                    }
                })
            })
        }

        // ================ 按钮点击 ==================
        function buttonClick() {
            // === 查询按钮 ===
            $('#btnQuery').on('click', function () {
                // 重新初始化表格
                initTable();
            });
            // === 显示全部 ===
            $('#btnAll').on('click', function () {
                // 重新加载页面
                location.reload();
            });

            // === 添加按钮 ===
            $('#btnAdd').on('click', function () {
                loadLayer("添加专业信息");
                // 修改Operation
                Operation = 1;
            })
        }

        // ================= 添加和修改的弹出层 ===========
        function loadLayer(title, value = "") {

            layui.use(['form', 'layer'], function () {
                // 实例化
                let form = layui.form;
                let layer = layui.layer;

                // 展示弹出层
                layer.open({
                    type: 1,
                    title: "<b style='color:navy;'>" + title + "</b>",
                    area: ['40%', '50%'],
                    btn: ['确定', '取消'],
                    content: $('#layerArea'),
                    resize: false,

                    // ============ 三个重要的回调函数=========
                    success: function (layero, index) {
                        //步骤01：使用Ajax把所有的院系填充到下拉框
                        $.ajax({
                            url: "{% url 'list_faculty' %}",
                            method: 'post',
                            data: {
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            },
                            dataType: 'json',
                            success: function (res) {
                                // 判断状态
                                if (res.status) {
                                    // 获得父容器
                                    let parentsContainer = $('#faculty');
                                    // 把父容器清空
                                    parentsContainer.html("");
                                    // 添加第一个“请选择”
                                    $('<option>').attr('value', "").text("请选择").appendTo(parentsContainer);
                                    // 遍历填充
                                    $.each(res.data, (index, value) => {
                                        $('<option>').attr('value', value.id).text(value.name).appendTo(parentsContainer);
                                    });
                                    // ==== 如果是编辑，填充值====
                                    if (Operation === 2) {
                                        form.val('layerForm', {
                                            faculty: value.faculty_id,
                                            major_id:value.id,
                                            major: value.name

                                        })
                                    }
                                    form.render();

                                } else {
                                    layer.msg("院系信息获取失败, 具体原因：" + res.error, {
                                        icon: 2,
                                        area: ['350px', '150px'],
                                        time: -1,
                                        btn: ['关闭']
                                    })
                                }
                            }
                        })

                        //步骤02: 通过获取的值选择下拉框的某一个选项， 完成赋值
                    },

                    yes: function (layero, index) {

                        if (Operation === 1) {
                            // ==添加==
                            $.ajax({
                                url: "{% url 'add_major' %}",
                                method: 'post',
                                data: $('#layerForm').serialize(),
                                dataType: 'json',
                                success: function (res) {
                                    if (res.status) {
                                        location.reload();
                                    } else {
                                        layer.msg(res.error, {
                                            icon: 2,
                                            area: ['350px', '150px'],
                                            time: -1,
                                            btn: ['关闭']
                                        })
                                    }
                                }
                            })
                        } else if (Operation === 2) {
                            // ==修改==
                            $.ajax({
                                url: "{% url 'edit_major' %}",
                                method: 'post',
                                data: $('#layerForm').serialize(),
                                dataType: 'json',
                                success: function (res) {
                                    if (res.status) {
                                        location.reload();
                                    } else {
                                        layer.msg(res.error, {
                                            icon: 2,
                                            area: ['350px', '150px'],
                                            time: -1,
                                            btn: ['关闭']
                                        })
                                    }
                                }
                            })
                        }

                    },
                    end: function (layero, index) {
                        // === 清除表单 ===
                        form.val('layerForm', {
                            faculty: "",
                            major: "",
                        })

                    }


                })
            })
        }

        // =================删除 ========================
        function deleteValue(value) {
            // 准备删除的确认信息
            let confirmStr = "您确定要删除专业信息【名称：" + value.name + "】的信息吗？";
            // 确认框
            layui.use(['layer'], function () {
                let layer = layui.layer;

                // 确认
                layer.confirm(confirmStr, {
                    icon: 3,
                    area: ['350px','200px'],
                }, function (index,elem) {
                    // Ajax请求
                    $.ajax({
                        url: "{% url 'del_major' %}",
                        method: 'post',
                        data:{
                            major_id:value.id,
                            csrfmiddlewaretoken:"{{ csrf_token }}"
                        },
                        dataType: 'json',
                        success: function (res) {
                            if(res.status){
                                location.reload();
                            } else {
                                layer.msg(res.error, {
                                    icon:2,
                                    area:['350px','150px'],
                                    time:-1,
                                    btn:['关闭']
                                })
                            }
                        }
                    })
                })
            })
        }

    </script>
{% endblock %}